<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>消息通知</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 font-sans">

<!-- 顶部导航（可替换） -->
<th:block th:replace="~{/header.html}"></th:block>

<main class="flex min-h-[calc(100vh-64px-64px)]">
    <th:block th:replace="~{/buyer/sidebar.html}"></th:block>
    <!-- 左侧供应商列表 -->
    <div class="w-72 bg-white shadow-md border-r">
        <h2 class="text-xl font-semibold text-center p-4 border-b text-gray-800">供应商列表</h2>
        <ul class="divide-y divide-gray-200">
            <li th:each="supplier : ${suppliers}"
                class="p-4 hover:bg-gray-50 relative cursor-pointer">
                <a th:href="@{/buyer/message/chat/{id}(id=${supplier.id})}" class="flex justify-between items-center text-gray-700">
                    <span th:text="${supplier.username}"></span>
                    <span th:if="${supplier.unreadCount > 0}"
                          class="bg-red-600 text-white text-xs px-2 py-0.5 rounded-full"
                          th:text="${supplier.unreadCount}"></span>
                </a>
            </li>
        </ul>
    </div>
</main>
<!-- 公共底部 -->
<th:block th:replace="~{/footer.html}"></th:block>
</body>
</html>
